<template>
  <div v-loading="loading" element-loading-text="加载中..." style="display: flex;flex-direction: column;height: 100%;">
    <div class="inf_basic">
      <div class="title_h4">
        <h4 class="title_inf">企业基本信息</h4>
      </div>
      <el-form ref="enterpriseDataRef" :rules="enterpriseDataRule" label-position="top" :model="enterpriseData"
        label-width="100px" class="demo-ruleForm">
        <el-form-item label="企业全称" prop="fullName">
          <el-input v-model="enterpriseData.fullName" placeholder="请输入企业全称" clearable :disabled="!edit" />
        </el-form-item>
        <el-form-item label="企业简称" prop="abbrevia">
          <el-input v-model="enterpriseData.abbrevia" placeholder="请输入企业简称" clearable :disabled="!edit" />
        </el-form-item>
        <el-form-item label="企业代码">
          <div class="input_show">
            <el-input v-model="enterpriseData.code" disabled />
            <!-- <el-icon color="#999" @click="showViewVal(false)" v-if="showView"><View /></el-icon>
            <el-icon color="#999" v-else @click="showViewVal(true)"><Hide /></el-icon> -->
          </div>
        </el-form-item>
        <el-form-item label="企业地址">
          <SingleAddress ref="addrsDom" :address="enterpriseData.addr" :disabled="!edit" />
        </el-form-item>
        <el-form-item label="企业详细地址">
          <el-input v-model="enterpriseData.address" :disabled="!edit" maxlength="200" />
        </el-form-item>
      </el-form>
      <div class="btn_xiugai" style="display: flex; gap: 5px; margin-bottom: 10px">
        <HPlainButton @click="onEdit" v-if="!edit">修改</HPlainButton>
        <HPlainButton @click="onSave(enterpriseDataRef)" v-if="edit">保存修改</HPlainButton>
        <HButton @click="edit = false" v-if="edit">取消</HButton>
      </div>
    </div>
    <div class="inf_basic" style="flex: 1;margin-top: 12px;">
      <div class="title_h4">
        <h4 class="title_inf">超级管理员</h4><el-tooltip effect="light" :offset="5" content="企业归属" placement="top-start">
          <el-icon size="18" color="#ccc">
            <QuestionFilled />
          </el-icon>
        </el-tooltip>
      </div>
      <div class="inf_x">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <div class="liter_tip">
          <p>{{ enterpriseData?.username }}</p>
          <p>{{ enterpriseData?.phone }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import SingleAddress from '@/components/address/singleAddress.vue'
import { getCustomerInfo, updateCustomer } from '../../../../../api/system'
import { QuestionFilled } from '@element-plus/icons-vue'
import HPlainButton from '@/components/common/button/HPlainButton.vue'
import HButton from '@/components/common/button/HButton.vue'

const loading = ref(false)
const addrsDom = ref()
const edit = ref(false) // 是否修改
const enterpriseDataRef = ref<FormInstance>()
const enterpriseData = ref({
  fullName: '', // 企业全称
  abbrevia: '', // 企业简称
  code: '', // 企业代码
  addr: {
    // 地址
    province: '',
    city: '',
    area: '',
    town: '',
  },
  address: '', // 详细地址
  phone: '',
  username: ''
})

const enterpriseDataRule = ref({
  fullName: [{ required: true, message: '企业全称不能为空', trigger: ['change', 'blur'] }],
  abbrevia: [{ required: true, message: '企业简称不能为空', trigger: ['change', 'blur'] }],
})

const text = ref('hdkjshjkhhhfhjdfh')
const tmp = ref('')
const showView = ref(true)
const showViewVal = (val) => {
  showView.value = val
  if (!val) {
    text.value = tmp.value
  } else {
    text.value = maskString(text.value)
  }
}
const maskString = (str) => {
  var length = str.length
  tmp.value = str
  if (length <= 10) {
    return str
  }
  var start = str.slice(0, 5)
  var end = str.slice(-5)
  var masked = start + '*'.repeat(length - 10) + end
  return masked
}

// 修改
const onEdit = () => {
  edit.value = true
}

// 保存修改
const onSave = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateCustomerApi()
    }
  })
}

// 清空对象数据
const clearEnterpriseData = () => {
  enterpriseData.value = {
    fullName: '', // 企业全称
    abbrevia: '', // 企业简称
    code: '', // 企业代码
    addr: {
      province: '',
      city: '',
      area: '',
      town: '',
    },
    address: '',
    phone: '',
    username: ''
  }
}

// 更新企业信息Api
const updateCustomerApi = () => {
  const addr = addrsDom.value.getSelectAddr()
  const data = {
    name: enterpriseData.value.fullName,
    abbrevia: enterpriseData.value.abbrevia,
    province: addr.province,
    city: addr.city,
    area: addr.area,
    town: addr.town,
    address: enterpriseData.value.address,
    phone: '',
    username: ''
  }
  updateCustomer(data).then((res) => {
    ElMessage({
      type: res.data.success ? 'success' : 'error',
      message: res.data.message,
    })
    if (res.data.success) {
      edit.value = false
      requestCustomerApi()
    }
  })
}

// 获取企业信息Api
const requestCustomerApi = async () => {
  clearEnterpriseData()
  loading.value = true
  await getCustomerInfo().then((res) => {
    loading.value = false
    if (res.data.success) {
      const data = res.data.data.row
      enterpriseData.value = {
        fullName: data.fullName, // 企业全称
        abbrevia: data.abbrevia, // 企业简称
        code: data.code, // 企业代码
        addr: {
          province: data.province,
          city: data.city,
          area: data.area,
          town: data.town,
        },
        address: data.address,
        phone: data.phone,
        username: data.username
      }
    }
  })
}

// 获取企业信息
onMounted(async () => {
  requestCustomerApi()
})
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
